<script setup>
import { reactive, toRefs, watch } from "vue";
import { SuccessFilled, CircleCloseFilled } from "@element-plus/icons-vue";
// import Button from "@comps/Demo/Button/index.vue";
// import Form from "@comps/Demo/form.vue";
// import Dialog from "@comps/Demo/dialog.vue";
// import Table from "@comps/Demo/table.vue";

const params = reactive({
  formData: {},
});
const searchBtnClick = (val) => {
  params.formData = { ...val };
};
const resetBtnClick = (val) => {
  params.formData = val;
};
</script>

<template>
  <div>
    <h1>按钮</h1>
    <br />
    <Button>普通按钮</Button>
    <Button type="primary">主要按钮</Button>
    <Button type="success">成功按钮</Button>
    <Button type="warning" :icon="SuccessFilled">告警按钮</Button>
    <Button type="danger" disabled>危险按钮</Button>
    <Button type="info" round>信息按钮</Button>
    <br />
    <h1>Dialog</h1>
    <br />
    <Dialog />
    <br />
    <h1>form</h1>
    <br />
    <Form @searchBtnClick="searchBtnClick" @resetBtnClick="resetBtnClick" />
    <h1>
      <span>当前表单值:</span>
      <span>{{ params.formData }}</span>
    </h1>
    <h1>表格</h1>
    <Table />
    <br />
  </div>
</template>

<style scoped></style>
